<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>网易云音乐</title>
  <style>
    body{
      margin: 0;
      color: #333;
      font-size: 14px;
    }
    #app{
      padding-top: 42px;
    }
    .head{
      display: flex;
      position: fixed;
      width: 100%;
      top: 0;
      background: #fff;
      z-index: 9;
    }
    .head:after{
      content: '';
      height: 1px;
      width: 100%;
      position: absolute;
      background: #ebecec;
      bottom: 0;
      z-index: -1;
    }
    .tabtitle{
      flex: 1;
      text-align: center;
    }
    .tabtxt {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid transparent;
      font-size: 15px;
    }
    .tab-active{
      border-color: #dd001b;
    }
    .icon{
      vertical-align: text-bottom;
      padding-right: 4px;
    }
    .input{
      height: 30px;
      line-height: 18px;
      border: none;
      background: transparent;
      outline: none;
      padding: 0;
      -webkit-tap-highlight-color:rgba(255,0,0,0);
      width: 80%;
    }
    .inputcover{
      background: #ebecec;
      border-radius: 30px;
      padding-left: 14px;
      margin: 15px 10px;
    }
    .m-history{
      padding: 15px 10px 0;
      border-top: 1px solid rgba(0,0,0,.1);
    }
    .search-title{
      font-size: 12px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    .search-history{
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      line-height: 32px;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 16px;
    }
    .m-suggest{
      border-top: 1px solid rgba(0,0,0,.1);
    }
    .recomtxt{
      display: inline-block;
      height: 45px;
      line-height: 45px;
      width: 100%;
      border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .item-suggest{
      display: flex;
      align-items: center;
    }
    .item-song{
      display: flex;
      height: 55px;
      margin-left: 10px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .song-name{
      font-size: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 4px;
    }
    .singer{
      font-size: 12px;
      color: #888;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .song-pic{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .rotate{
      animation:rotate 18s linear infinite;
      animation-play-state: paused;
    }
    .song-pic-box{
      width: 184px;
      height: 184px;
      margin: 30px auto 20px;
      position: relative;
    }
    @keyframes rotate {
      0%{
        transform: rotate(0);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .icon-play{
      position: absolute;
      top: 59px;
      padding: 0;
      left: 59px;
      -webkit-tap-highlight-color:rgba(255,0,0,0);
    }
    .lyric{
      height: 20px;
      text-align: center;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .play-name{
      font-size: 17px;
      margin-bottom: 12px;
    }
    .progress{
      position: absolute;
      left: -12px;
      width: 208px;
      top: -12px;
    }
    .comment-pic{
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .comment-content{
      display: inline-block;
      width: 100%;
    }
    .comment-box{
      display: flex;
      padding: 10px;
      border-top: 1px solid rgba(0,0,0,.1);
    }
    .between{
      display: flex;
      justify-content: space-between;
    }
    .comment-time{
      font-size: 9px;
      margin-right: 5px;
    }
    .comment-txt{
      font-size: 15px;
      margin-top: 5px;
    }
    .comment-title{
      font-size: 16px;
      margin: 6px;
    }
    .comment-flex{
      display: flex;
      align-items: center;
    }
    .lyric-box{
      height: 62px;
      overflow: hidden;
      position: relative;
    }
    .lyric-box::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9),hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.8));
    }
    .lyric-focus{
      color: #dd001b;
      font-size: 16px;
      height: 22px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="head" @click="changeTab">
    <div class="tabtitle" title="1"><div title="1" class="tabtxt" :class="currentIndex==='1'&&'tab-active'"><svg t="1573973499123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24623" width="18" height="18"><path d="M998.417847 968.923523 738.389131 712.967573c68.050929-73.967263 109.909294-171.800228 109.909294-279.479317 0-230.345352-189.746575-417.036095-423.778057-417.036095-234.030475 0-423.77705 186.690742-423.77705 417.036095 0 230.297023 189.746575 416.986758 423.77705 416.986758 101.131452 0 193.870691-34.971414 266.723355-93.126882l261.095991 256.924553c12.70864 12.514315 33.370499 12.514315 46.078132 0C1011.174816 1001.759377 1011.174816 981.436831 998.417847 968.923523L998.417847 968.923523 998.417847 968.923523zM424.520368 786.354882c-198.040115 0-358.5393-157.977996-358.5393-352.86562 0-194.88863 160.499184-352.866627 358.5393-352.866627C622.562497 80.622635 783.110011 238.600632 783.110011 433.489262 783.110011 628.376886 622.562497 786.354882 424.520368 786.354882L424.520368 786.354882 424.520368 786.354882z" p-id="24624" fill="#333333"></path></svg>搜索</div></div>
    <div class="tabtitle" title="2"><div title="2" class="tabtxt" :class="currentIndex==='2'&&'tab-active'"><svg t="1573973921343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25781" width="18" height="18"><path d="M516.4384171045926 128.07693562311113c-219.70163757511108 0-397.23831569066664 177.53667690192594-397.23831569066664 397.23831569066664v332.8812694945185c0 24.411293468444445 19.97287636385185 44.384169832296294 44.384169832296294 44.38416861866666h93.20675555555555c24.411293468444445 0 44.384169832296294-19.97287636385185 44.38416861866666-44.38416861866666v-219.70163878874072c0-24.411293468444445-19.97287636385185-44.384169832296294-44.38416861866666-44.38416861866666h-93.20675555555555v-68.7954620871111c0-195.2903453202963 157.5638005380741-352.8541458583704 352.8541458583704-352.854147072s352.8541458583704 157.5638005380741 352.8541458583704 352.854147072v68.7954620871111h-57.69941993244444c-13.315251313777777 0-22.19208430933333 8.876834209185184-22.19208430933333 22.19208430933333s8.876834209185184 22.19208430933333 22.19208430933333 22.19208430933333l57.69941993244444-2.2192079454814815v221.92084673422224l-95.42596350103702 2.2192079454814815v-197.50955326577775c0-13.315251313777777-8.876834209185184-22.19208430933333-22.19208552296296-22.19208430933333s-22.19208430933333 8.876834209185184-22.19208430933333 22.19208430933333v197.50955326577775c0 24.411293468444445 19.97287636385185 42.164960673185185 42.164960673185185 42.164960673185185H867.0733550174814c24.411293468444445 0 42.164960673185185-19.97287636385185 42.164960673185185-42.164960673185185V523.0960421546667c4.438417104592592-217.48242962962962-175.31746895644446-395.0191065315555-392.7998985860741-395.0191065315555z m-352.8541458583704 510.41794639644445h93.20675555555555v219.70163878874072h-93.20675555555555v-219.70163878874072z" fill="" p-id="25782"></path></svg>听歌</div></div>
    <div class="tabtitle" title="3"><div title="3" class="tabtxt" :class="currentIndex==='3'&&'tab-active'"><svg t="1573974040832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26681" width="18" height="18"><path d="M372.90833 573.517773c-169.341448-111.108579-166.972428-309.963004-68.768101-421.613951 102.348833-116.358287 279.887193-127.374487 393.027092-22.006816 67.9699 63.303493 98.09176 142.622176 87.633278 234.845111-10.299865 90.780033-58.498936 159.3537-130.823125 205.234917 48.142787 30.295828 99.120212 56.329466 142.995693 91.271234 86.031759 68.517384 134.614581 160.776136 152.221056 269.300794 2.865338 17.662759-2.890921 31.80013-20.686714 35.397152-22.656633 4.58454-29.272493-12.377235-32.470414-30.341878-16.219857-91.127967-57.572818-168.686514-126.320452-230.746655-188.989477-170.6155-468.52362-125.859951-592.935552 96.771658-22.820367 40.836176-34.404517 88.175646-49.150772 133.176795-5.725558 17.473442-9.987748 35.136201-32.086664 31.150312-21.126748-3.806806-23.572518-20.502513-20.15458-39.848658 28.924559-163.748923 123.475581-274.468635 273.803468-340.422565 6.994494-3.070004 14.203887-5.648808 21.275131-8.549963C371.035627 576.899895 371.311927 575.93796 372.90833 573.517773zM509.948214 553.706011c125.547834 0.450267 230.900155-100.629631 230.741538-221.383141-0.158617-121.091211-107.787858-228.909769-228.781852-229.180952C391.205556 102.865617 284.405217 209.067306 282.128297 331.632119 279.943477 449.274691 386.621016 553.26086 509.948214 553.706011z" p-id="26682"></path></svg>我的</div></div>
  </div>
  <div v-show="currentIndex==='1'">
    <div class="inputcover">
      <svg t="1573973499123" style="vertical-align: middle;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24623" width="14" height="14"><path d="M998.417847 968.923523 738.389131 712.967573c68.050929-73.967263 109.909294-171.800228 109.909294-279.479317 0-230.345352-189.746575-417.036095-423.778057-417.036095-234.030475 0-423.77705 186.690742-423.77705 417.036095 0 230.297023 189.746575 416.986758 423.77705 416.986758 101.131452 0 193.870691-34.971414 266.723355-93.126882l261.095991 256.924553c12.70864 12.514315 33.370499 12.514315 46.078132 0C1011.174816 1001.759377 1011.174816 981.436831 998.417847 968.923523L998.417847 968.923523 998.417847 968.923523zM424.520368 786.354882c-198.040115 0-358.5393-157.977996-358.5393-352.86562 0-194.88863 160.499184-352.866627 358.5393-352.866627C622.562497 80.622635 783.110011 238.600632 783.110011 433.489262 783.110011 628.376886 622.562497 786.354882 424.520368 786.354882L424.520368 786.354882 424.520368 786.354882z" p-id="24624" fill="#333333"></path></svg>
      <input type="text" class="input" v-model="keyword" @input="getSuggest" @focus="focusInput" placeholder="搜索歌曲、歌手、专辑">
    </div>
    <div class="m-history" v-show="searchIndex==='1'" @click="getSearch">
      <div class="search-title">
        <div>历史记录</div>
        <svg @click.stop="deleteSearchHistory" t="1573982392365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28268" width="16" height="16"><path d="M907.618072 232.742353 744.713682 232.742353 744.713682 116.382952c0-12.852708-10.419786-23.272495-23.272495-23.272495L302.556765 93.110457c-12.852708 0-23.272495 10.418762-23.272495 23.272495l0 116.360425L116.380904 232.743377c-12.852708 0-23.272495 10.419786-23.272495 23.272495s10.418762 23.272495 23.272495 23.272495l791.237168 0c12.852708 0 23.272495-10.419786 23.272495-23.272495S920.469756 232.742353 907.618072 232.742353zM325.829259 139.654423l372.340458 0 0 93.08793L325.829259 232.742353 325.829259 139.654423z" p-id="28269"></path><path d="M791.257647 372.362985c-12.852708 0-23.272495 10.418762-23.272495 23.272495l0 488.712146L256.012799 884.347625 256.012799 395.635479c0-12.852708-10.418762-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 511.983617c0 12.852708 10.418762 23.272495 23.272495 23.272495l558.516318 0c12.852708 0 23.272495-10.419786 23.272495-23.272495L814.529118 395.635479C814.529118 382.782771 804.110355 372.362985 791.257647 372.362985z" p-id="28270"></path><path d="M442.189684 767.987201l0-372.351721c0-12.852708-10.418762-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 372.351721c0 12.852708 10.418762 23.272495 23.272495 23.272495S442.189684 780.839909 442.189684 767.987201z" p-id="28271"></path><path d="M628.353257 767.987201l0-372.351721c0-12.852708-10.419786-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 372.351721c0 12.852708 10.419786 23.272495 23.272495 23.272495S628.353257 780.839909 628.353257 767.987201z" p-id="28272"></path></svg>
      </div>
      <div class="search-history" v-for="(item,index) in searchHistory" :key="index" v-text="item" :title="item"></div>
    </div>
    <div class="m-suggest" @click="getSearch" v-show="searchIndex==='2'">
      <div class="item-suggest" v-for="(item,index) in suggestList" :key="index" :title="item.keyword">
        <svg t="1573973499123" style="vertical-align: middle;padding: 10px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24623" width="14" height="14"><path d="M998.417847 968.923523 738.389131 712.967573c68.050929-73.967263 109.909294-171.800228 109.909294-279.479317 0-230.345352-189.746575-417.036095-423.778057-417.036095-234.030475 0-423.77705 186.690742-423.77705 417.036095 0 230.297023 189.746575 416.986758 423.77705 416.986758 101.131452 0 193.870691-34.971414 266.723355-93.126882l261.095991 256.924553c12.70864 12.514315 33.370499 12.514315 46.078132 0C1011.174816 1001.759377 1011.174816 981.436831 998.417847 968.923523L998.417847 968.923523 998.417847 968.923523zM424.520368 786.354882c-198.040115 0-358.5393-157.977996-358.5393-352.86562 0-194.88863 160.499184-352.866627 358.5393-352.866627C622.562497 80.622635 783.110011 238.600632 783.110011 433.489262 783.110011 628.376886 622.562497 786.354882 424.520368 786.354882L424.520368 786.354882 424.520368 786.354882z" p-id="24624" fill="#333333"></path></svg>
        <span class="recomtxt" v-text="item.keyword" :title="item.keyword"></span>
      </div>
    </div>
    <div class="m-suggest" @click="playSong" v-show="searchIndex==='3'">
      <div class="item-song" v-for="(item,index) in songList" :key="index" :title="item.id">
        <div :title="item.id" style="width: 85%;">
          <div class="song-name" v-text="item.name"></div>
          <div class="singer" v-text="getSingerName(item)"></div>
        </div>
        <svg t="1573978228680" style="padding-right: 10px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27469" width="26" height="26"><path d="M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM641.355986 496.239856 458.681591 367.804917c-8.391765-5.8333-19.649011 0.102339-19.649011 10.336198l0 256.869878c0 10.23386 11.257246 16.169498 19.649011 10.336198l182.776734-128.434939C648.622027 511.897661 648.519688 501.254447 641.355986 496.239856z" p-id="27470" fill="#aaaaaa"></path></svg>
      </div>
    </div>
  </div>
  <div v-show="currentIndex==='2'">
    <div class="song-pic-box"><img ref="songPic" :src="picUrl" alt="" class="song-pic rotate">
      <svg viewBox="0 0 100 100" class="progress"><path d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        " stroke="#e5e9f2" stroke-width="4.8" fill="none" class="el-progress-circle__track" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path><path d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        " stroke="#dd001b" fill="none" stroke-linecap="round" stroke-width="4.8" class="el-progress-circle__path" :style="'stroke-dasharray:'+ progress+'px, 295.31px'" style="stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"></path></svg>
      <svg t="1573978228680" @click="playMusic(true)" v-show="!isPlaying" class="icon icon-play" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27469" width="66" height="66"><path d="M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM641.355986 496.239856 458.681591 367.804917c-8.391765-5.8333-19.649011 0.102339-19.649011 10.336198l0 256.869878c0 10.23386 11.257246 16.169498 19.649011 10.336198l182.776734-128.434939C648.622027 511.897661 648.519688 501.254447 641.355986 496.239856z" p-id="27470" fill="#ffffff"></path></svg>
      <svg t="1574137163847" @click="playMusic(false)" v-show="isPlaying" class="icon icon-play" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1454" width="66" height="66"><path d="M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM440.055966 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L462.570458 391.956826C462.570458 379.471517 452.541275 369.442335 440.055966 369.442335zM570.025984 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L592.540476 391.956826C592.540476 379.471517 582.511293 369.442335 570.025984 369.442335z" p-id="1455" fill="#ffffff"></path></svg>
    </div>
    <div v-text="songName" class="lyric play-name"></div>
    <div class="lyric-box">
      <div :style="'transform: translateY(-'+(lyricIndex-2)*20+'px)'" style="transition: transform .3s ease-out">
        <div class="lyric" v-for="(item,key) in lyric" :key="key" :class="(key===lyricIndex-1)&&'lyric-focus'" v-text="item[1]"></div>
      </div>
    </div>
    <div class="comment-title">精彩评论</div>
    <div class="comment-box" v-for="item in comments" :key="item.commentId"><img class="comment-pic" :src="item.user.avatarUrl" alt=""><div class="comment-content">
      <div class="between">
        <div v-text="item.user.nickname"></div>
        <div class="comment-flex">
          <span class="comment-time" v-text="item.likedCount"></span><svg t="1574171853020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3676" width="16" height="16"><path d="M617.36 857.329c-23.814 0-69.51-3.523-117.884-7.26-49.97-3.856-106.23-8.198-140.334-8.679v-49.638c35.625 0.45 90.752 4.705 144.154 8.832l0.579 0.04c47.19 3.636 91.765 7.071 113.49 7.071 46.868 0 99.988 0 137.303-24.37 23.52-15.36 34.851-78.695 44.441-142.245 2.34-15.498 4.49-29.772 6.86-42.199 4.435-23.183 13.062-45.685 20.665-65.536 11.408-29.742 22.18-57.835 12.503-72.002l-1.776-2.596h-1.378c-4.464-2.54-15.114-6.349-39.173-6.79a256.138 256.138 0 0 0-4.449-0.035c-23.47 0-50.217 2.888-73.81 5.442-20.593 2.233-38.38 4.158-52.372 4.158-40.428 0-66.847-9.646-78.505-28.662-7.578-12.365-7.732-27.689-0.415-42.035 38.21-75.07 22.113-143.11 13.465-179.66-0.89-3.754-1.684-7.107-2.324-10.051-2.483-11.444-16.589-18.289-28.785-18.289-1.454 0-2.882 0.102-4.244 0.302-7.055 1.055-14.956 4.5-13.507 21.975 13.717 166.083-146.923 248.064-183.675 264.571l-19.092-45.834C381.455 409.2 513.29 341.18 502.385 209.193c-3.774-45.609 25.226-70.615 55.639-75.162a77.763 77.763 0 0 1 11.438-0.834c32.281 0 69.248 19.707 77.435 57.37a519.574 519.574 0 0 0 1.812 7.874l0.302 1.239c8.858 37.432 27.295 115.282-11.832 201.815l-3.093 6.845 7.368 1.45c7.05 1.382 15.365 2.083 24.71 2.083 11.355 0 28.692-1.879 47.037-3.87 26.22-2.837 53.324-5.77 78.581-5.77 45.783 0 73.862 9.891 88.351 31.124 24.31 35.62 7.603 79.237-7.137 117.719-7.22 18.836-14.669 38.277-18.268 57.124-2.176 11.34-4.23 24.97-6.41 39.403l-0.118 0.773c-10.435 69.228-22.267 147.687-66.402 176.507-49.669 32.446-113.31 32.446-164.439 32.446z" fill="#333" p-id="3677"></path><path d="M238.413 856.018c-31.304 0-56.77-25.467-56.77-56.76v-339.61c0-31.304 25.466-56.77 56.77-56.77h82.831c31.304 0 56.77 25.466 56.77 56.765v339.61c0 31.298-25.466 56.765-56.77 56.765h-82.831z m0-403.497a7.132 7.132 0 0 0-7.127 7.127v339.615c0 3.927 3.2 7.122 7.127 7.122h82.831c3.917 0 7.112-3.185 7.127-7.097v-339.64c0-3.932-3.2-7.127-7.127-7.127h-82.831z" fill="#333" p-id="3678"></path></svg>
        </div>
      </div>
      <div class="comment-time" v-text="transDate(item.time)"></div>
      <div class="comment-txt" v-text="item.content"></div>
    </div></div>
  </div>
  <div v-show="currentIndex==='3'">
    <div style="padding: 10px;">我听过的</div>
    <div @click="playLocalSong" style="border-top: 1px solid rgba(0,0,0,.1);">
      <div class="item-song" v-for="(item,index) in songHistory" :key="index" :title="index">
        <div :title="index" style="width: 85%;">
          <div class="song-name" v-text="item.songName"></div>
          <div class="singer" v-text="item.singerName"></div>
        </div>
        <svg :id="index" style="padding: 10px;" t="1573982392365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28268" width="20" height="20"><path d="M907.618072 232.742353 744.713682 232.742353 744.713682 116.382952c0-12.852708-10.419786-23.272495-23.272495-23.272495L302.556765 93.110457c-12.852708 0-23.272495 10.418762-23.272495 23.272495l0 116.360425L116.380904 232.743377c-12.852708 0-23.272495 10.419786-23.272495 23.272495s10.418762 23.272495 23.272495 23.272495l791.237168 0c12.852708 0 23.272495-10.419786 23.272495-23.272495S920.469756 232.742353 907.618072 232.742353zM325.829259 139.654423l372.340458 0 0 93.08793L325.829259 232.742353 325.829259 139.654423z" p-id="28269"></path><path d="M791.257647 372.362985c-12.852708 0-23.272495 10.418762-23.272495 23.272495l0 488.712146L256.012799 884.347625 256.012799 395.635479c0-12.852708-10.418762-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 511.983617c0 12.852708 10.418762 23.272495 23.272495 23.272495l558.516318 0c12.852708 0 23.272495-10.419786 23.272495-23.272495L814.529118 395.635479C814.529118 382.782771 804.110355 372.362985 791.257647 372.362985z" p-id="28270"></path><path d="M442.189684 767.987201l0-372.351721c0-12.852708-10.418762-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 372.351721c0 12.852708 10.418762 23.272495 23.272495 23.272495S442.189684 780.839909 442.189684 767.987201z" p-id="28271"></path><path d="M628.353257 767.987201l0-372.351721c0-12.852708-10.419786-23.272495-23.272495-23.272495s-23.272495 10.418762-23.272495 23.272495l0 372.351721c0 12.852708 10.419786 23.272495 23.272495 23.272495S628.353257 780.839909 628.353257 767.987201z" p-id="28272"></path></svg>
      </div>
    </div>
  </div>
  <audio ref="audio" :src="songUrl" autoplay @timeupdate="timeupdate" @ended="ended"></audio>
</div>
<script src="./js/vue.js"></script>
<script src="./js/aes.js"></script>
<script>
  // {"ids":"[29561077]","level":"standard","encodeType":"aac"}
  // 0CoJUm6Qyw8W8jud是固定的
  // var res = a('{"s":"a"}','0CoJUm6Qyw8W8jud')
  // O94naFpEwfi50Res是随机数
  // var encText = a(res,'O94naFpEwfi50Res')
  // 这个也是O94naFpEwfi50Res加密的  用rsa加密
  // var encSecKey = 'a1848570c3cb53a57a4e20b091a9738b4869cb22c9ccde4a52e6eff9cdc0f165683f2bce48cc1732f8e9b7fcaee70dde85e290f9a6d33a7c5091c31f365f8fbd4248fb133d43d695219421acaacf61e07dcef784f264e78f24bd978ce6224a378a25d41db68de120481ba56d77127d2fdd65723095251870238639e913495d0e'
  // axios.defaults.baseURL = 'http://192.168.0.123'
  const vm = new Vue({
    el: '#app',
    data:{
      picUrl:'http://p1.music.126.net/E_ffmvXrVZoTugVf_Zf4Cg==/18520173860179248.jpg',
      isPlaying:false,
      keyword:'',
      suggestList:[],
      songList:[],
      songUrl:'./video/mute.mp3',
      searchIndex: '1',
      currentIndex: '1',
      searchHistory: [],
      songHistory: [],
      lyric: [],
      comments: [],
      lyricIndex: 2,
      lyricLen: 0,
      mode: 'loop',
      songName: 'There For You - Martin Garrix / Troye Sivan',
      progress: 0
    },
    methods:{
      ajax(url,body){
        return fetch(url,{method:'POST',body:body,headers:{'Content-Type': 'application/x-www-form-urlencoded'}}).then(_=>_.json()).then(res=>res)
      },
      transDate(val){
          const date = new Date(+val)
          const year = date.getFullYear()
          const month = date.getMonth()+1
          const day = date.getDate()
          return year+'年'+month+'月'+day+'日'
      },
      ended(e){
        if(this.mode==='loop'){
            e.target.play()
            const obj=this.lyric
            this.lyricIndex=2
        }
      },
      getComment(id){
          // {"resourceType":4,"resourceId":411314681,"limit":15,"commentsNum":5}
          var data = this.getParams('{"resourceType":4,"resourceId":'+(+id)+',"limit":15,"commentsNum":5}')
          this.ajax('/weapi/v1/resource/comments/get',data).then(res=>{
              this.comments = res.hotComments
          })
      },
      timeupdate(e){
          const target = e.target
          var currentTime = target.currentTime,duration=target.duration
          this.progress = currentTime/duration*295.3 | 0
          var lyric = this.lyric
          var lyricLen = this.lyricLen
          var lyricIndex = this.lyricIndex
          if(lyricLen===0||lyricLen-2===lyricIndex)return
          var item = lyric[lyricIndex]
          if(item[0]<currentTime){
              this.lyricIndex=lyricIndex+1
          }
      },
      getLyric(id){
        var data = this.getParams('{"id":'+(+id)+',"lv":0,"tv":0}')
        this.ajax('/weapi/song/lyric',data).then(res=>{
            const lyric = res.lrc.lyric
            const list = lyric.split(/\n/)
            let newList = []
            for(var i of list){
                if(!/]$/.test(i)){
                    newList.push(i)
                }
            }
            var obj = []
            for(var i of newList){
                var ls = i.split(']')
                const time = ls[0]
                const m = +time.charAt(2)
                const s = +time.slice(4,6)
                const res = m*60+s
                obj.push([res,ls[1]])
            }
            this.lyric=obj
            this.lyricIndex=2
            this.lyricLen=obj.length
        })
      },
      playMusic(bool){
        const songPic = this.$refs.songPic
        const audio = this.$refs.audio
        if(this.songUrl==='./video/mute.mp3'){
            this.songUrl='./video/test.m4a'
            this.getLyric(480426313)
            this.getComment(480426313)
        }
        if(!bool){
          songPic.style.animationPlayState = 'paused'
          audio.pause()
        }else{
          songPic.style.animationPlayState = 'running'
          audio.play()
        }
        this.isPlaying = bool
      },
      getSingerName(item){
        const ar = item.ar
        const name = item.al.name
        var str = ''
        for(var i of ar){
            str+=i.name + ' / '
        }
        return str.slice(0,-2) + ' - ' + name
      },
      deleteSearchHistory(){
        localStorage.setItem('searchHistory','[]')
        this.searchHistory = []
      },
      changeTab(e){
        const title = e.target.title || e.target.parentElement.title
        this.currentIndex = title
      },
      focusInput(){
        if(this.keyword.trim()!==''){
            this.searchIndex = '2'
            this.suggestList.length===0&&this.getSuggest()
        }
      },
      playSong(e){
        const title = e.target.title || e.target.parentElement.title
        var data = this.getParams('{"ids":"['+title+']","level":"standard","encodeType":"aac"}')
        this.ajax('/weapi/song/enhance/player/url/v1',data).then(res=>{
          const url = res.data[0].url
          if(url){
              this.getLyric(title)
              this.getComment(title)
              const item = this.songList.find(v=>v.id==title)
              this.picUrl = item.al.picUrl
              var songName = item.name
              var id = item.id
              var singerName = this.getSingerName(item)
              this.songName = songName+' - '+singerName.split('-')[0]
              var picUrl = item.al.picUrl
              var songUrl = url
              var data = {id,songName,singerName,picUrl,songUrl}
              this.songUrl=url
              const history = localStorage.getItem('songHistory')
              const songHistory = history ? JSON.parse(history) : []
              const index = songHistory.findIndex(v=>v.id==id)
              if(index!==-1){
                  songHistory.splice(index,1)
              }
              songHistory.unshift(data)
              this.songHistory=songHistory
              localStorage.setItem('songHistory',JSON.stringify(songHistory))
              this.currentIndex = '2'
              this.isPlaying===false&&this.playMusic(true)
          }else{
              alert('请使用网易云app播放')
          }
        })
      },
      playLocalSong(e){
          const target = e.target
          const id = target.id || target.parentElement.id
          if(id){
              const songHistory = this.songHistory
              songHistory.splice(+id,1)
              localStorage.setItem('songHistory',JSON.stringify(songHistory))
              return
          }
          const title = target.title || target.parentElement.title
          const item = this.songHistory[title]
          this.picUrl = item.picUrl
          this.songUrl=item.songUrl
          this.currentIndex = '2'
          this.songName = item.songName+' - '+item.singerName.split('-')[0]
          this.isPlaying===false&&this.playMusic(true)
          this.getLyric(item.id)
          this.getComment(item.id)
      },
      getSearch(e){
        const title = e.target.title || e.target.parentElement.title
        if(!title)return
        this.keyword = title
        const history = localStorage.getItem('searchHistory')
        const searchHistory = history ? JSON.parse(history) : []
        const index = searchHistory.findIndex(v=>v===title)
        if(index!==-1){
            searchHistory.splice(index,1)
        }
        searchHistory.unshift(title)
        this.searchHistory = searchHistory
        localStorage.setItem('searchHistory',JSON.stringify(searchHistory))
        var data = this.getParams(JSON.stringify({s:title,limit:20,offset:0,type:1,"strategy":5,"queryCorrect":true}))
        this.ajax('/weapi/search/get',data).then(res=>{
          this.songList=res.result.songs || []
          this.searchIndex = '3'
        })
      },
      aes (e, t) {
        var i = CryptoJS
        var n = i.enc.Utf8.parse(t), r = i.enc.Utf8.parse("0102030405060708"), o = i.enc.Utf8.parse(e);
        return i.AES.encrypt(o, n, {iv: r, mode: i.mode.CBC}).toString()
      },
      getSuggest(){
        if(this.keyword.trim()===''){
            setTimeout(()=>{
                this.searchIndex = '1'
            },100)
            return
        }
        var data = this.getParams(JSON.stringify({s:this.keyword}))
        this.ajax('/weapi/search/suggest/keyword',data).then(res=>{
          this.searchIndex = '2'
          this.suggestList=res.result.allMatch || []
        })
      },
      getParams(val){
        var res = this.aes(val,'0CoJUm6Qyw8W8jud')
        var encText = this.aes(res,'t7syWlaSI2aQzqln')
        var encSecKey = "4458e1e36cee979266565e87368ba3b34a8adc168d486cab051f585f605e6a9f674b70267dddf1c13eb7a677d5eb44cd8122fe87435f96d4f2deda993207dc69ca9794e0511df60a7a092c3d49aac76f7a6cadf680aa7976a91c8fba5d1e7b7a7f390476c183991aa8d45b9ba60af8485f71423f1bbcdbde36d780877f27195f"
        var str = 'params='+encodeURIComponent(encText)+'&encSecKey='+encSecKey
        return str
      }
    },
      created(){
        const history = localStorage.getItem('searchHistory')
        history && (this.searchHistory = JSON.parse(history))
        const songHistory = localStorage.getItem('songHistory')
        songHistory && (this.songHistory = JSON.parse(songHistory))
      },
      mounted(){
      	const audio = this.$refs.audio;
        document.addEventListener("WeixinJSBridgeReady", ()=> {
            audio.play();
            setTimeout(()=>{
                audio.pause()
            },2000)
        }, false);
      }
  })
</script>
</body>
</html>
